<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../static/echarts.min.js"></script>
  </head>

  <body>
    <style>
      #main {
        width: 100%;
        height: 500px;
      }
    </style>
    <div id="main"></div>
    <script>
      var chart = echarts.init(document.getElementById("main"));
      var data = [
        { name: "组1", value: 35 },
        { name: "组2", value: 30 },
        { name: "组3", value: 20 },
        { name: "组4", value: 10 }, // 示例的其他项
      ];

      // 总人数
      var total = 85;

      // 按人数降序排列，只取前三项
      var topData = data.sort((a, b) => b.value - a.value).slice(0, 3);

      // 转换为比例数据
      var topRatios = topData.map((item) =>
        ((item.value / total) * 100).toFixed(1)
      );

      // X轴的分类
      var categories = topData.map((item) => item.name);

      // Y轴数据
      var values = topData.map((item) => item.value);

      var option = {
        title: {
          text: "当前在库人数：85人",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        legend: {
          data: ["人数", "占比"],
          bottom: 500,
        },
        xAxis: {
          type: "category",
          data: categories,
        },
        yAxis: [
          {
            type: "value",
            name: "人数",
            min: 0,
            max: Math.max(...values) + 5,
            position: "left",
          },
          {
            type: "value",
            name: "占比 (%)",
            min: 0,
            max: 100,
            position: "right",
            axisLabel: {
              formatter: "{value}%",
            },
            // show: false,
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            data: values,
            itemStyle: {
              color: "#73C9E6",
            },
          },
          {
            name: "占比",
            type: "line",
            yAxisIndex: 1,
            data: topRatios,
            itemStyle: {
              color: "#FFA07A",
            },
            lineStyle: {
              width: 2,
            },
          },
        ],
      };
      // chart.setOption(option);

      chart.setOption(option);
    </script>
  </body>
</html>
